import React, { Component } from 'react';
import GalleryImage from './GalleryImage';
import Calendar from 'react-calendar';
import IconCell from './IconCell';
import BorderCell from './BorderCell';
import PlusminInput from './PlusminInput';
import { getParams } from '../../utils/utils';
import { Modal } from 'antd';
export default class HeadInfo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      type: null,
      date: null,
      adultNum: 1,
      childNum: 0,
      totalPrice: 0
    };
  }

  componentDidMount() {
    const { location, getDetail, getTypes, clearReverseInfo } = this.props;
    if (location.search) {
      const { id } = getParams(location.search);
      getDetail({ id });
      getTypes({ id });
    }
    clearReverseInfo();
  }

  dateCellRender = () => {};
  onActiveDateChange = ({ activeStartDate, view }) =>
    alert('Changed view to: ', activeStartDate, view);
  onChange = value => {
    let totalPrice = this.resetPrice({ date: value });
    this.setState({ date: value, totalPrice });
  };
  onDrillDown = ({ activeStartDate, view }) =>
    alert('Drilled down to: ', activeStartDate, view);
  tileContent = ({ date, view }) => {
    return (
      <div>
        {view === 'month' && date.getDay() === 3 ? (
          <div className="ableSelect">￥3699</div>
        ) : null}
      </div>
    );
  };
  tileDisabled = ({ activeStartDate, date, view }) => date.getDay() === 0;
  clickNum = (isPlus, type) => {
    //type==1 adult
    let { adultNum, childNum } = this.state;
    if (isPlus) {
      if (type == 1) {
        adultNum++;
      } else {
        childNum++;
      }
    } else {
      if ((type == 1 && !adultNum) || (type == 0 && !childNum)) {
        return;
      }
      if (type == 1) {
        adultNum--;
      } else {
        childNum--;
      }
    }
    let totalPrice = this.resetPrice({ adultNum, childNum });
    this.setState({ adultNum, childNum, totalPrice });
  };

  resetPrice = params => {
    //可能需要重新计算优惠信息
    const state = Object.assign(this.state, params);
    const { type, adultNum, childNum, date } = state;

    let totalPrice = 0;
    if (type && date) {
      totalPrice = adultNum * type.price + childNum * type.childPrice;
    }
    return totalPrice;
  };
  /**改变套餐类型 */
  changeType = item => {
    let totalPrice = this.resetPrice({ type: item });
    this.setState({ type: item, totalPrice });
  };
  /**立即预定 */
  reserve = () => {
    const { type, adultNum, childNum, date } = this.state;
    const centered = true;
    if (!type) {
      Modal.warning({ title: '请选择套餐类型', centered });
      return;
    }
    if (!date) {
      Modal.warning({ title: '请选择日期', centered });
      return;
    }
    if (!adultNum && !childNum) {
      Modal.warning({ title: '请选择数量', centered });
      return;
    }
    const { reserverInfo, logged, history, location } = this.props;
    reserverInfo({ type, adultNum, childNum, date }); //跳转至登录或者订单页面时需要保存购买信息       到相应页面返回是要清除购买信息
    if (logged) {
      history.push(''); //确认订单
    } else {
      history.push('/auth/login', { from: { pathname: '/purchase/order' } }); //登录页面
    }
  };
  render() {
    const { saleInfo, baseInfo, types, priceRange } = this.props;
    const { title, imgs, extraService, address } = baseInfo;
    const { type, adultNum, childNum, totalPrice, date } = this.state;
    const collect = 12;

    let adultPrice = 366;
    let childPrice = 388;
    /**Calendar组件 value:选中日期 onSelect：选中事件 onPanelChange：日期面板回调 */
    return (
      <div className="headInfo">
        <div className="left">
          {imgs && imgs.length > 0 ? (
            <GalleryImage />
          ) : (
            <div
              style={{
                width: '16rem',
                height: '10.68rem',
                border: '1px solid #e5e5e5'
              }}
            />
          )}
          {saleInfo ? (
            <Calendar
              className="calendar"
              view="month"
              minDetail="month"
              minDate={new Date()}
              onActiveDateChange={this.onActiveDateChange}
              onChange={this.onChange}
              onDrillDown={this.onDrillDown}
              tileContent={this.tileContent}
              tileDisabled={this.tileDisabled}
            />
          ) : (
            <Calendar
              className="calendar"
              view="month"
              onChange={this.onChange}
            />
          )}
        </div>
        <div className="right">
          <h3 className="f20">{title}</h3>
          {extraService && extraService.length > 0 ? (
            <div>
              <IconCell iconClass="icon-collected" title="【特色服务】" />
              <ul className="dfrscw">
                {extraService.map((item, index) => (
                  <BorderCell title={item} key={index} />
                ))}
              </ul>
            </div>
          ) : null}
          <div
            className="rightCell dfrsc"
            style={{
              background: '#FEF7E7',
              height: '2.4rem',
              width: '100%',
              margin: '0.8rem 0'
            }}
          >
            <span className="fnormal">价格</span>
            <div>
              <small className="cred2">￥</small>
              <span className="f20 cred2">{priceRange}</span>
              {/* <span className="fnormal">起</span> */}
            </div>
          </div>
          <div className="rightCell dfrsc">
            <span className="fnormal">地址</span>
            <div>
              <span>{address}</span>
              <a>显示在地图上</a>
            </div>
          </div>
          <div className="select">
            {types && types.length > 0 ? (
              <div className="rightCell dfr">
                <span className="fnormal" style={{ marginTop: '0.8rem' }}>
                  费用包含
                </span>
                <ul className="dfrscw">
                  {types.map((item, index) => (
                    <div
                      key={index}
                      onClick={() => {
                        this.changeType(item);
                      }}
                      className={
                        type ? (item.id == type.id ? 'activeType' : '') : ''
                      }
                    >
                      <BorderCell title={item.title} />
                    </div>
                  ))}
                </ul>
              </div>
            ) : null}
            {type && date ? (
              <div
                className="rightCell dfrsc"
                style={{ margin: '0.5rem 0 0.8rem' }}
              >
                <span className="fnormal" style={{ marginTop: '0rem' }}>
                  数量选择
                </span>
                <ul className="">
                  <div className="dfrsc">
                    <PlusminInput
                      value={adultNum}
                      type={1}
                      onClick={this.clickNum}
                    />
                    <span className="fnormal" style={{ margin: '0 0.6rem' }}>
                      成人
                    </span>
                    <span className="f14 cred2">￥{type.price}</span>
                  </div>
                  <div className="dfrsc" style={{ marginTop: '0.4rem' }}>
                    <PlusminInput
                      value={childNum}
                      type={0}
                      onClick={this.clickNum}
                    />
                    <span className="fnormal" style={{ margin: '0 0.6rem' }}>
                      儿童
                    </span>
                    <span className="f14 cred2">￥{type.childPrice}</span>
                  </div>
                </ul>
              </div>
            ) : null}
            <div className="rightCell dfrsc">
              <span className="fnormal">总价</span>
              <div>
                <span className="f20 cred2">
                  <small className="cred2">￥</small>
                  {totalPrice ? totalPrice : '--'}
                </span>
                <a
                  className="byBtn"
                  onClick={() => {
                    this.reserve();
                  }}
                >
                  立即预定
                </a>
              </div>
            </div>
          </div>
          <div className="dfrsc">
            <IconCell iconClass="icon-collect" title={`收藏  (${collect})`} />
            <div style={{ marginLeft: '0.4rem' }}>
              <IconCell iconClass="icon-share" title="分享" />
            </div>
          </div>
          <div className="hintInfo">
            <IconCell
              iconClass="icon-info"
              title="需提前1天18:00前预订（当地时间）"
            />
          </div>
        </div>
      </div>
    );
  }
}
